<template>
	<view class="forgetPage">
		<!-- 背景装饰 -->
		<view class="bg-decoration"></view>
		
		<!-- 头部欢迎语 -->
		<view class="welcome-box">
			<image 
				class="welcome-bg" 
				src="/static/images/use_bg2.png" 
				mode="aspectFit"
			/>
		</view>

		<!-- 标题 -->
		<view class="title-box">
			<text class="title-text">忘记密码</text>
		</view>

		<!-- 表单区域 -->
		<view class="form-box">
			<!-- 手机号输入 -->
			<view class="input-item">
				<image class="input-icon" src="/static/images/ic_phone.png" mode="aspectFit"></image>
				<input 
					class="input-field" 
					type="number"
					maxlength="11"
					v-model="mobile"
					placeholder="请输入手机号"
					placeholder-class="placeholder-style"
				/>
			</view>

			<!-- 验证码输入 -->
			<view class="input-item">
				<image class="input-icon" src="/static/images/ic_check.png" mode="aspectFit"></image>
				<input 
					class="input-field" 
					type="number"
					maxlength="6"
					v-model="code"
					placeholder="请输入验证码"
					placeholder-class="placeholder-style"
				/>
				<view class="code-btn" @click="sendCode">
					<text :class="{ disabled: countdown > 0 }">
						{{ countdown > 0 ? `${countdown}s` : '获取验证码' }}
					</text>
				</view>
			</view>

			<!-- 新密码 -->
			<view class="input-item">
				<image class="input-icon" src="/static/images/ic_pwd.png" mode="aspectFit"></image>
				<input 
					class="input-field" 
					:type="showPassword ? 'text' : 'password'"
					v-model="password"
					placeholder="请输入新密码"
					placeholder-class="placeholder-style"
				/>
				<u-icon 
					:name="showPassword ? 'eye' : 'eye-off'" 
					size="40rpx" 
					color="#999"
					@click="showPassword = !showPassword"
				></u-icon>
			</view>

			<!-- 登录按钮 -->
			<view class="submit-btn" @click="handleSubmit">
				<text class="submit-btn-text">登录</text>
			</view>
		</view>
	</view>
</template>

<script>
import { sendMsm, changePassword } from "@/api/userSalesman.js";

export default {
	data() {
		return {
			mobile: '',
			code: '',
			password: '',
			showPassword: false,
			countdown: 0,
			timer: null,
		};
	},
	onUnload() {
		if (this.timer) {
			clearInterval(this.timer);
		}
	},
	methods: {
		// 发送验证码
		async sendCode() {
			if (this.countdown > 0) return;
			
			if (!this.mobile) {
				return uni.$u.toast('请输入手机号');
			}
			
			if (!/^1[3-9]\d{9}$/.test(this.mobile)) {
				return uni.$u.toast('请输入正确的手机号');
			}

			try {
				// 调用发送验证码接口
				const result = await sendMsm(this.mobile);
				
				if (result.code === 200) {
					uni.$u.toast('验证码已发送');
					
					// 开始倒计时
					this.countdown = 60;
					this.timer = setInterval(() => {
						this.countdown--;
						if (this.countdown <= 0) {
							clearInterval(this.timer);
						}
					}, 1000);
				} else {
					uni.$u.toast(result.msg || '发送失败');
				}
			} catch (error) {
				uni.$u.toast(error.msg || '发送失败');
			}
		},

		// 提交重置密码
		async handleSubmit() {
			// 验证手机号
			if (!this.mobile) {
				return uni.$u.toast('请输入手机号');
			}
			
			if (!/^1[3-9]\d{9}$/.test(this.mobile)) {
				return uni.$u.toast('请输入正确的手机号');
			}

			// 验证验证码
			if (!this.code) {
				return uni.$u.toast('请输入验证码');
			}
			if (this.code.length !== 6) {
				return uni.$u.toast('请输入6位验证码');
			}

			// 验证密码
			if (!this.password) {
				return uni.$u.toast('请输入新密码');
			}
			if (this.password.length < 6) {
				return uni.$u.toast('密码长度不能少于6位');
			}

			try {
				uni.showLoading({ title: '提交中...' });
				
				// 调用重置密码接口
				const params = {
					mobile: this.mobile,
					verifyCode: this.code,
					password: this.password
				};
				const result = await changePassword(params);
				
				if (result.code === 200) {
					// 重置成功
					uni.$u.toast('密码重置成功');
					
					// 延迟跳转到登录页
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				} else {
					uni.$u.toast(result.msg || '重置失败');
				}
			} catch (error) {
				uni.$u.toast(error.msg || '重置失败');
			} finally {
				uni.hideLoading();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.forgetPage {
	width: 100vw;
	min-height: 100vh;
	background-image: url('/static/images/use_bg.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
	padding: 0 46rpx;
	box-sizing: border-box;
}

.bg-decoration {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 400rpx;
	background-image: radial-gradient(circle at top right, rgba(88, 139, 243, 0.15) 0%, transparent 60%);
	pointer-events: none;
}

.welcome-box {
	padding-top: 120rpx;
	margin-bottom: 48rpx;
	width: 100%;
	display: flex;
	
	.welcome-bg {
		width: 340rpx;
		height: 124rpx;
	}
}

.title-box {
	margin-bottom: 60rpx;
	
	.title-text {
		font-size: 48rpx;
		font-weight: 600;
		color: #3D3D3D;
	}
}

.form-box {
	.input-item {
		display: flex;
		align-items: center;
		height: 100rpx;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 50rpx;
		padding: 0 40rpx;
		margin-bottom: 32rpx;
		
		.input-icon {
			width: 40rpx;
			height: 40rpx;
			flex-shrink: 0;
		}
		
		.input-field {
			flex: 1;
			font-size: 28rpx;
			color: #3D3D3D;
			margin-left: 24rpx;
		}
		
		.placeholder-style {
			color: #CCCCCC;
		}
		
		.code-btn {
			padding-left: 20rpx;
			border-left: 1rpx solid #EAEAEA;
			
			text {
				font-size: 26rpx;
				color: #588BF3;
				
				&.disabled {
					color: #CCCCCC;
				}
			}
		}
	}
	
	.submit-btn {
		height: 100rpx;
		background: linear-gradient(90deg, #6B9EFF 0%, #588BF3 100%);
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 8rpx 24rpx rgba(88, 139, 243, 0.3);
		margin-top: 60rpx;
		
		.submit-btn-text {
			font-size: 36rpx;
			color: #FFFFFF;
			font-weight: 600;
		}
	}
}
</style>
